import Vue from 'vue'
// 导入VueRouter
import VueRouter from 'vue-router'
// 导入子组件
// import login from '../views/login.vue'
// 简写@ 相当于 /src 从src开始找
import login from '@/views/user/login.vue'
import home from '@/views/home/home.vue'
import article from '@/views/home/article.vue'
import search from '@/views/home/search.vue'
import searchResult from '@/views/home/searchResult.vue'
import movie from '@/views/movie/movie.vue'
import qa from '@/views/qa/qa.vue'
import layout from '@/views/layout.vue'
import user from '@/views/user/user.vue'
import edit from '@/views/user/edit.vue'
import student from '@/views/user/student.vue'
import notFound from '@/views/notFound/notFound.vue'

// 导出token工具包
import { getToken } from '@/utils/token.js'

Vue.use(VueRouter)

const routes = [
  // 配置路由
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/edit',
    name: 'edit',
    component: edit
  },
  {
    path: '/article',
    name: ' myArticle',
    component: article
  },
  {
    path: '/searchResult',
    name: 'searchResult',
    component: searchResult
  },
  {
    path: '/search',
    name: 'search',
    component: search
  },
  {
    path: '/student',
    name: 'student',
    component: student
  },
  // 二级路由出口layout
  {
    path: '/',
    name: 'layout',
    component: layout,
    children: [
      {
        path: '/home',
        name: 'home',
        component: home
      },
      {
        path: '/movie',
        name: 'movie',
        component: movie
      },
      {
        path: '/qa',
        name: 'qa',
        component: qa
      },
      {
        path: '/user',
        name: 'user',
        component: user,
        // 给user加一个路由元信息，标识
        meta: { isLogin: true }
      },
      {
        path: '/',
        redirect: '/home'
      }
    ]
  },
  {
    path: '/notFound',
    name: 'notFound',
    component: notFound
  },
  {
    // 加载路由时，会从上往下匹配，匹配到直接跳转，直到最后一个*，就会重定向到notFound
    path: '*',
    redirect: '/notFound'
  },

]

let originPush = VueRouter.prototype.push
// originPush的this指向是window，因为是声明的全局函数保存
// 吞掉报错的原理是，去掉原生方法里的throw err
VueRouter.prototype.push=function(location,resolve,reject) {
  if (resolve||reject) {
    // 改变this指向为VueRouter的this
    // 调用方法时才会谁调用this就指向谁
    return originPush.call(this,location,resolve,reject)
  } else {
    return originPush.call(this,location).catch(err=>{

    })
  }
}


const router = new VueRouter({
  routes
})

// 导航守卫，要在创建了路由对象后
router.beforeEach((to, from, next) => {
  // to：去哪里 from:从哪里跳转，next：通过检查，正常跳转
  // console.log(to);  打印的是路由对象
  // console.log(from);
  // 判断是否是用户页面
  // if (to.meta.isLogin) {
  //   // 判断是否有携带token
  //   if (getToken()) {
  //     // 有携带，正常跳转
  //       next()
  //   } else {
  //     // 没有，拦截去登录页面
  //     next({path:'/login'})
  //   }
  // }


  // 走next({ path: '/login' })需要满足的条件，
  // 1.（1）：是用户页面to.meta.isLogin为true，没有登录，没有token
  // 2. 不是用户页面to.meta.isLogin为false，有token值
  if (to.meta.isLogin && !getToken()) {
    next({ path: '/login' })
    // 可以手动清空浏览器报错
    // setTimeout(() => {
    //   console.clear()
    // }, 50);
  } else {
    //正常跳转
    next()
  }

  // if (!to.meta.isLogin || getToken()) {
  //   next()
  // } else {
  //   next({ path: '/login' })
  // }
})

export default router
